<template>
  <div>
    <Row
      :gutter="12"
      v-if="
        authorityList.includes('yibaoyuanxingtu') &&
        authorityList.includes('yibaozhexiantu')
      "
    >
      <Col span="12">
        <div class="card-box">
          <div class="card-tit">医保缴费进度</div>
          <div
            ref="dom"
            :style="{
              width: '100%',
              height: authorityList.includes('shebaoyuanxingtu')
                ? '504px'
                : '737px',
              marginTop: '20px',
            }"
          ></div>
        </div>
      </Col>
      <Col span="12">
        <div class="card-box" style="padding:0">
          <div class="card-tit" style="padding:20px">医保缴费统计/单位</div>
          <div
            ref="dom2"
            :style="{
              width: '100%',
              height: authorityList.includes('shebaozhexiantu')
                ? '524px'
                : '757px',
            }"
          ></div>
        </div>
      </Col>
    </Row>
    <Row
      :gutter="12"
      v-if="
        authorityList.includes('shebaoyuanxingtu') &&
        authorityList.includes('shebaozhexiantu')
      "
    >
      <Col span="12">
        <div class="card-box">
          <div class="card-tit">社保缴费进度</div>
          <div
            ref="dom3"
            :style="{
              width: '100%',
              height: authorityList.includes('yibaoyuanxingtu')
                ? '504px'
                : '737px',
              marginTop: '20px',
            }"
          ></div>
        </div>
      </Col>
      <Col span="12">
        <div class="card-box" style="padding:0">
          <div class="card-tit" style="padding:20px">社保缴费统计/单位</div>
          <div
            ref="dom4"
            :style="{
              width: '100%',
              height: authorityList.includes('yibaozhexiantu')
                ? '524px'
                : '757px',
            }"
          ></div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { pieStatics, lineStatics } from "./myChart";

export default {
  name: "county",
  props: {
    authorityList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      dom: {},
      dom2: {},
      dom3: {},
      dom4: {},
    };
  },
  created() {
    if (this.authorityList.includes("shebaoyuanxingtu")) {
      this.shebaoPieStatics();
    }
    if (this.authorityList.includes("shebaozhexiantu")) {
      this.shebaoLineStatics();
    }
    if (this.authorityList.includes("yibaoyuanxingtu")) {
      this.yibaoPieStatics();
    }
    if (this.authorityList.includes("yibaozhexiantu")) {
      this.yibaoLineStatics();
    }
    this.onResize();
  },
  methods: {
    // 社保饼图统计
    shebaoPieStatics() {
      this.APIS.workhomeSpeedSheBao().then((res) => {
        if (res.code == 20000) {
          let unStaffNum = 0;
          if (res.data.totalNum - res.data.payNum > 0) {
            unStaffNum = res.data.totalNum - res.data.payNum;
          }
          var seriesData = [
            {
              value: res.data.payNum,
              name: "已缴费占比",
              label: {
                show: res.data.payNum == 0 ? false : true,
                normal: { color: res.data.payNum / res.data.totalNum * 100 >= 25 ? "#fff" : "#333" },
              },
            },
            {
              value: unStaffNum,
              name: "未缴费占比",
              label: {
                show: unStaffNum == 0 ? false : true,
              },
            },
          ];
          pieStatics("dom3", ["#00CA8E", "#e9f7ff"], seriesData, this);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 医保饼图统计
    yibaoPieStatics() {
      this.APIS.workhomeSpeedYiBao().then((res) => {
        if (res.code == 20000) {
          let unStaffNum = 0;
          if (res.data.totalNum - res.data.payNum > 0) {
            unStaffNum = res.data.totalNum - res.data.payNum;
          }
          var seriesData = [
            {
              value: res.data.payNum,
              name: "已缴费占比",
              label: {
                show: res.data.payNum == 0 ? false : true,
                normal: { color: res.data.payNum / res.data.totalNum * 100 >= 25 ? "#fff" : "#333" },
              },
            },
            {
              value: unStaffNum,
              name: "未缴费占比",
              label: {
                show: unStaffNum == 0 ? false : true,
              },
            },
          ];
          pieStatics("dom", ["#1476FD", "#e9f7ff"], seriesData, this);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 社保折柱图统计
    shebaoLineStatics() {
      this.APIS.payRankSheBao().then((res) => {
        if (res.code == 20000) {
          let xAxisData = [];
          let seriesData = [];
          let seriesData2 = [];
          res.data.map((item) => {
            xAxisData.push(item.areaName);
            seriesData.push(item.amount / 100);
            seriesData2.push(item.insuredNum);
          });
          lineStatics("dom4", xAxisData, seriesData, seriesData2, this, [
            "#00CA8E",
            "#1476FD",
          ]);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 医保折柱图统计
    yibaoLineStatics() {
      this.APIS.payRankYiBao().then((res) => {
        if (res.code == 20000) {
          let xAxisData = [];
          let seriesData = [];
          let seriesData2 = [];
          res.data.map((item) => {
            xAxisData.push(item.areaName);
            seriesData.push(item.amount / 100);
            seriesData2.push(item.insuredNum);
          });
          lineStatics("dom2", xAxisData, seriesData, seriesData2, this);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    onResize() {
      var self = this;
      window.addEventListener("resize", function () {
        setTimeout(() => {
          if (Object.keys(self.dom).length > 0) {
            self.dom.resize();
          }
          if (Object.keys(self.dom2).length > 0) {
            self.dom2.resize();
          }
          if (Object.keys(self.dom3).length > 0) {
            self.dom3.resize();
          }
          if (Object.keys(self.dom4).length > 0) {
            self.dom4.resize();
          }
        }, 150);
      });
    },
  },
};
</script>

<style scoped lang="less">
@import "../style.less";
</style>
